<template>
  <div>
    <div class="search">
      <div class="block">
        <el-date-picker
          v-model="month"
          type="month"
          format="yyyy 年 MM 月"
          value-format="yyyy-MM"
          placeholder="按月份查询"
          style="width:200px;">
        </el-date-picker>
      </div>
      <el-button @click="onSubmit">搜索</el-button>
    </div>
    <div class="bigbox">
      <div class="demo-image__preview" v-for="item in url" :key="item.id">
        <el-image
          style="width: 300px; height: 300px"
          :src="'http://' + item.src"
          :preview-src-list="srcList"
          fit="cover"
        >
        </el-image>
        <div style="font-size: 14px; margin-left: 50px; color:rgb(190, 190, 190);">
          时间：{{ item.time }}
        </div>
        <div class="button">
          <!-- <span style="font-size: 14px">点击按钮删除</span> -->
          <el-button type="primary" size="mini" @click="Delete(item.id)"
            >点击删除</el-button
          >
          <el-button type="primary" size="mini" @click="copy(item.id)"
            >点击复制url链接</el-button
          >
        </div>
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="size"
          :page-count="count"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      month: "",
      count: 0,
      total: 0,
      size: "",
      currentPage: 1, //当前页数
      //   总表的展示
      sumTableData: [],
      page: 1, //分页
      size: 10, //每一页的条数
      imglink: "",
      checked: false,
      url: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    onSubmit() {
      if(!this.month){
        this.month = "";
      }
      this.getlist();
    },
    copy(id) {
      this.$api.Getinfo(id, localStorage.getItem("token")).then((res) => {
        if (res.msg == "success") {
          let eInput = document.createElement("input");
          eInput.value = "http://" + res.data.src;
          eInput.style.cssText = "opacity:0; position: absolute; bottom: 1%; width: 10px;";
          document.body.appendChild(eInput);
          eInput.select(); //选择对象
          let copyText = document.execCommand("Copy"); //执行浏览器的复制命令
          console.log(copyText);
          if (copyText) this.$message.success("复制成功");
        }
      });
    },
    // 删除按钮
    Delete(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.Delete(id, localStorage.getItem("token")).then((res) => {
            console.log(res);
            if (res.msg == "success") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getlist();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getlist() {
      this.$api
        .Getlist(
          localStorage.getItem("token"),
          this.size,
          this.page,
          this.month
        )
        .then((res) => {
          if (res.msg == "success") {
            this.total = res.data.totalCount;
            this.count = res.data.totalPage;
            this.url = res.data.list;
            let srcList = res.data.list.map((item) => {
              return "http://" + item.src;
            });
            this.srcList = srcList;
          }
        });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getlist();
    },
  },
};
</script>

<style scoped>
.bigbox {
  display: flex;
  justify-content: space-between;
  margin-left: 110px;
  margin-right: 5px;
  padding: 15px;
  padding-left: 30px;
  flex-wrap: wrap;
  border: 1px solid #3333;
  margin-top: 5px;
  border-radius: 3px;
}
.demo-image__preview {
  margin-bottom: 10px;
}
.demo-image__preview .el-image {
  border: 1px solid #6666;
  border-radius: 10px;
}
.demo-image__preview .el-image img {
  width: 100%;
  height: 100%;
}
.button {
  width: 300px;
  justify-content: space-between;
  height: 40px;
}
.button span {
  float: left;
  line-height: 40px;
}
.button button {
  float: right;
  margin-right: 30px;
}
.page {
  margin-left: 50%;
  transform: translateX(-50%);
}
.search{
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.search .block {
  margin-right: 1%;
  font-size: 14px;
  text-decoration: none;
}
.el-date-editor {
  width: 350px;
}
</style>
